<!--新闻类别管理-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('新闻类别管理')">
</head>

<!--数据校验插件静态资源文件-->
<script src="js/bootstrapValidator.min.js"></script>
<link href="css/bootstrapValidator.min.css" rel="stylesheet">


<style>
    div.container div.row div {
        margin: 5px 0px;
        text-align: center;
    }
</style>





<body>
<div>
    <div id="workingArea">
        <div class="container">
            <div class="row">
                <!--栅栏布局12列开始-->
                <div class="col-md-12">
                    <div th:replace="include/admin/adminNavigator::html"></div>
                </div>
                <!--面包屑导航-->
                <div class="col-md-12" style="text-align: left">
                    <ol class="breadcrumb">
                        <li><a href="/home">个人中心</a></li>
                        <li>新闻类别管理</li>
                    </ol>
                </div>
                <!--栅栏布局3列-->
                <div class="col-md-3 col-sm-3 col-xs-3" >
                <div  th:replace="include/admin/adminLeftMenu::html"></div>
            </div>
                <!--栅栏布局8列开始-->
                <div class="col-md-8  col-sm-9  col-xs-9 " >
                    <!--查询结果显示开始-->
                    <div class="col-sm-2 col-xs-2"></div>
                    <div class=" col-sm-10 col-xs-10" >
                        <div class=" text-muted">新闻类别列表</div>
                        <table class="table table-striped table-bordered table-hover  table-condensed">
                            <thead>

                            <tr class="success">
                                <th>ID</th>
                                <th>类别名称</th>
                                <th>删除</th>
                                <th>编辑</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="bean in beans">
                                <td>{{bean.id}}</td>
                                <td>{{bean.name}}</td>
                                <td><a href="#nowhere" @click="deleteBean(bean.id)">
                                    <span class="glyphicon glyphicon-trash"></span></a></td>
                                <td><a href="#nowhere" @click="getBean(bean.id)" data-toggle="modal"
                                       data-target="#myModal">
                                    <span class="glyphicon glyphicon-edit"></span></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>


                        <!--分页显示-->
                        <div th:replace="include/admin/adminPage::html"></div>

                        <!--增加模块-->
                        <div>
                            <form class="form-horizontal" role="form">
                                <h2>新增新闻类别</h2>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">新增类别：</label>
                                    <div class="col-sm-4">
                                        <input class="form-control" v-model="bean.name"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary" type="button" @click="add">增加</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--查询结果显示结束-->

                </div>
                <!--栅栏布局8列结束-->


                <!--模态窗体修改开始-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button data-dismiss="modal" class="close" type="button"><span
                                        aria-hidden="true">×</span><span
                                        class="sr-only">Close</span></button>
                                <h4 class="modal-title">编辑信息</h4>
                            </div>
                            <div class="modal-body">
                                <!--<p>编辑信息</p>-->
                                <form>
                                    用户名：<input v-model="bean.name" name="name" class="form-control">
                                    <br>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                                <button data-dismiss="modal" class="btn btn-primary" type="button" @click="update">
                                    提交修改
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
                <!--模态窗体修改结束-->
            </div>
        </div>
    </div>
</div>

<!--前后端交互-->
<script>
    $(function () {
        /*文档加载开始*/
        var data4Vue = {
            uri: "type",
            pagination:{},
            beans: [],
            bean: {id: "", name: ""}
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted: function () { //mounted　表示这个 Vue 对象加载成功了
                this.list(0);
            },
            methods: {
                list: function (start) {
                    var url = this.uri + "?start=" + start;
                    axios.get(url).then(function (response) {
                        console.log(response.data);
                        vue.pagination = response.data.data;
                        vue.beans = response.data.data.content;

                    });
                },
                add: function () {
                    var url = this.uri;
                    var formData = new FormData();
                    formData.append("name", this.bean.name);
                    axios.post(url, formData).then(function (response) {
                        if (response.data.code != 0) {
                            alert("增加失败");
                        } else {
                            alert("增加成功");
                            this.bean = {id: "", name: ""};
                            vue.list(0);
                        }
                    });
                },
                deleteBean: function (id) {
                    if (!checkDeleteLink())
                        return;
                    var url = this.uri + "/" + id;
                    axios.delete(url).then(function (response) {
                        if (0 == response.data.code) {
                            vue.list(0);
                        }
                        else {
                            alert("删除失败");
                        }
                    });
                },
                getBean: function (id) {
                    var url = this.uri + "/" + id;
                    axios.get(url).then(function (response) {
                        console.log(response);
                        vue.bean = response.data.data;
                    })
                },
                update: function () {
                    if (!isEmpty(this.bean.name, "用户名"))
                        return;
                    var url = this.uri + "/" + this.bean.id;
                    //axios.js 上传文件要用 formData 这种方式
                    var formData = new FormData();
                    formData.append("id", this.bean.id);
                    formData.append("name", this.bean.name);
                    axios.put(url, formData).then(function () {
                        vue.list(0);
                    });
                },
                jump: function (page) {
                    jump(page, vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start, vue);
                },
                logout: function () {
                    var url = "logout";
                    axios.post(url).then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 0) location.href = "fore_login";
                    });
                },
            }
        });

        /*文档加载借宿*/
    });
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                note_type: {
                    validators: {
                        notEmpty: {
                            message: '文章类型不能为空'
                        }
                    }
                },
            },
            submitHandler: function (validator, form, submitButton) {
                alert("submit");
            }
        });
    });
</script>
</body>
</html>